﻿<%@ page language="java" pageEncoding="UTF-8"
	errorPage="/ui/defaultException.jsp"%>
<%@include file="/ui/tags.jsp"%>
<!DOCTYPE html>
<html lang="zh-CN">
	<c:choose>
		<c:when test="${resource.resourceType ==2 }">
			<c:set var="resourceName" value="房型" scope="page"/>
		</c:when>
		<c:when test="${resource.resourceType ==3 }">
			<c:set var="resourceName" value="餐厅" scope="page"/>
		</c:when>
		<c:otherwise>
			<c:set var="resourceName" value="特色" scope="page"/>
		</c:otherwise>
	</c:choose>
<head>
	<title>${resourceName }</title>
    <%@include file="/ui/mobile/head.jsp"%>
    <!--
    <link href="${cpath}/resources/mobile/js/nivo-slider/themes/default/default.css" rel="stylesheet" type="text/css" />
    <script src="${cpath}/resources/mobile/js/nivo-slider/jquery.nivo.slider.js" type="text/javascript"></script>
       <link href="${cpath}/resources/mobile/js/swipe/style.css" />
      -->
   
	<style type="text/css">
	.swipe {
		overflow: hidden;
		visibility: hidden;
		position: relative;
	}
	
	.swipe-wrap {
		overflow: hidden;
		position: relative;
	}
	
	.swipe-wrap>div {
		float: left;
		width: 100%;
		position: relative;
	}
	</style>
<!-- 
    <script type="text/javascript">
        $(function () {
        	  $("#slider").nivoSlider({
                  effect: "fade",
                  slices: 10,
                  boxCols: 10,
                  boxRows: 10,
                  animSpeed: 3000,
                  pauseTime: 2000,
                  startSlide: 0,
                  directionNav: true,
                  controlNav: true,
                  controlNavThumbs: false,
                  pauseOnHover: true,
                  manualAdvance: true
              });
        });
    </script>
     -->
</head>
<body>

    <div class="page">
        <div class="page-top">
        	<div class="page-top-left">
                <a href="${cpath }/mobile/hotel.do?action=viewHotel&hotelId=${hotel.hotelId }">
                    <img src="${cpath}/resources/mobile/img/icon/back.png" height="35" /></a>
            </div>
            <div class="page-top-center">${resourceName }</div>
            <div class="page-top-right"  style="display: none">
                <a href="action://share" onclick="showShare()">
                    <img src="${cpath}/resources/mobile/img/icon/l.png" height="35" /></a>
            </div>
        </div>
        <div class="page-content">
            <div class="clear">
            </div>
            <div class="hotel-img">
				<div id='slider' class='swipe'>
					<div class='swipe-wrap'>
						
						<c:forEach var="resourceItem" items="${resource.images }">
						   <div class="slider-loading">
						    <%-- 
						   	<img class="lazy" src="${cpath}/resources/mobile/img/loading.gif" data-original="${cpath }${upload_image_root}${resource.resourceImgPreffix}${resourceItem.resourceImg}" />
                            --%>
                            <img src="${image_domain }${resourceItem.source}" />
                            </div>
                        </c:forEach>
                        
                        
					</div>
				</div>
				<nav>
				    <ul id="position">
				    <c:forEach var="resourceItem" items="${resource.images }" varStatus="status">
				    	<c:if test="${status.count == 1}">
				      	<li class="on"></li>
				      	</c:if>
				      	<c:if test="${status.count != 1}">
				      		<li class=""></li>
				      	</c:if>
				    </c:forEach>
				    </ul>
				 </nav>
				<%--
				<div class="slider-banner">
                    <div class="slider-wrapper theme-default">
                        <div id="slider" class="nivoSlider">
                        	<c:forEach var="resourceItem" items="${resource.resourceItems }">
                            <img src="${cpath }${upload_image_root}${resource.resourceImgPreffix}${resourceItem.resourceImg}" 
                            	data-thumb="${cpath }${upload_image_root}${resource.resourceImgPreffix}${resourceItem.resourceImg}" alt="" />
                            </c:forEach>
                        </div>
                    </div>
                </div>
                  --%>
            </div>
            <!-- 
            <style>
             #slider{ width:100%; }
             #slider img{ width:100%;}
            </style>
             -->
            <div class="hotel-title">${resource.name }</div>
            <div class="hotel-remark">${resource.content }</div>
            <div class="click-load">
            	<a href = "javascript:void(0)" onclick="$('.hotel-remark').css('height','auto');$('.click-load').remove();">
            		查看更多
            		<img src="${cpath}/resources/mobile/img/icon/down.png">
            	</a>
            </div>
            <div class="hotel-news ">
            	<div class="hotel-news-title">
	                    <div class="hotel-news-title-line">
	                        <div class="title-line">
	                        </div>
	                        <div class="hotel-news-title-name-w">
	                            <div class="hotel-news-title-name">更多${resourceName }&nbsp;&gt;</div>
	                        </div>
	                    </div>
                	</div>
                <div class="list-style">
                	<c:forEach var="moreItem" items="${moreResources }">
                    <div class="list-style-inner">
                        <a href="${cpath }/mobile/hotel.do?action=viewHotelResource&resourceId=${moreItem.resourceId}">
                            ${moreItem.name }</a>
                        </div>
                    </c:forEach>
                    </div>
                </div>
                <div class="clear">
                </div>
            </div>
        </div>
    </div>
    <script src="${cpath}/resources/mobile/js/swipe/swipe.js" type="text/javascript"></script>
    <script src="${cpath}/resources/mobile/js/lazyload/jquery.lazyload.js" type="text/javascript"></script>
    <script type="text/javascript">
       window.mySwipe = new Swipe(document.getElementById('slider'), {
    	  //startSlide: 2,
    	  speed: 400,
    	  auto: 5000,
    	  continuous: true,
    	  //disableScroll: true
    	  //stopPropagation: false,
    	  callback: function(index, elem) {
    		  var i = bullets.length;
    	      while (i--) {
    	        bullets[i].className = ' ';
    	      }
    	      bullets[index].className = 'on';
    	  }
    	  //transitionEnd: function(index, elem) {}
    	});
        $(".lazy").lazyload({ threshold : 200 });
        var bullets = document.getElementById('position').getElementsByTagName('li');
    </script>
    <%@include file="/ui/mobile/share.jsp"%>
    <script type="text/javascript">
    	var title = '${resourceName}';
    	var data = $('.hotel-remark').text();
    	var imgs = [];
    	$("img", $('.hotel-img')).each(function(){
    		var img = window.location.protocol +"//" + window.location.host + $(this).attr('src');
    		imgs.push(img);
    	});
    	bindShareAction(title,data,imgs);
    </script>
    <%@include file="/ui/mobile/footer.jsp"%>
</body>
</html>
